@charset "UTF-8";
@import url(keyframes.css);

.eight h1{
    font-family: mading;
    font-size: 4em;
    /* margin-top: 3%; */
    margin-bottom: 3%;
    /* text-align: left; */
    letter-spacing: 10px;
}
.eight h2{
    font-family: spacefont;
    font-size: 2em;
    /* text-align: left; */
    margin-left: 5%;
    letter-spacing: 10px;
    text-transform: uppercase;
}
.eight h3{
    font-family: hole;
    font-size: 3em;
    text-align: right;
    margin-right: 5%;
    margin-top: 5%;
}
.eight h4{
    font-family: hole;
    font-size: 1em;
    text-transform: uppercase;
    /* margin-top: 3%; */
}
.eight .formdiv{
    width: 50%;
    height: 55%;
    overflow: hidden;
    margin-left: 50%;
    /* margin-top: 5%; */
}

.formdiv form input{
    display: block;

    width: 90%;
    margin: 5% 0;
    /* padding: 3% 0 3% 3%; */
    padding: 3% 0;
    border: 2px solid rgb(219, 193, 168);

    background: rgba(118, 49, 55);

    font-family: mading;
    font-size: 1.5em;

    color: rgb(219, 193, 168);
}
.formdiv form input:hover{
    border: 3px solid rgb(219, 188, 159);
}

.eight img{
    position: fixed;
    left: 10%;
    bottom: 15%;
}
.eightsubmit:hover{
    background: rgb(219, 193, 168);
    color: #fff;
}
.formdiv form input::-webkit-input-placeholder{
    color: rgb(219, 193, 168);
}
.formdiv form input::-moz-placeholder{
    color: rgb(219, 193, 168);
}
.formdiv form input:-moz-placeholder{
    color: rgb(219, 193, 168);
}
.formdiv form input:-ms-placeholder{
    color: rgb(219, 193, 168);
}
@media screen and (max-device-width: 320px){
    .eight .formdiv {
        width: 90%;
        height: 55%;
        margin-left: 10%;
    }
    .eight h1 {
        margin-top: 6%;
        font-size: 2em;
    }
    .eight h2 {
        font-size: .5em;
        letter-spacing: 1px;
    }
    .eight h3 {
        font-size: 1.5em;
    }
    .formdiv form {
        padding-top: 5%;
    }
    .formdiv form input {
        font-size: 1em;
    }
    .eight img {
        /* top: 16%;
        transform: scale(.5);
        left: 5%; */
        display: none;
    }
    .eight h4{
        font-size: 0.5em;
    }
}
@media screen and (max-device-width:539px)  and (min-device-width:321px) {
    .eight .formdiv {
        width: 90%;
        height: 65%;
        margin-left: 10%;
    }
    .eight h1 {
        margin-top: 6%;
        font-size: 2em;
    }
    .eight h2 {
        font-size: .5em;
        letter-spacing: 1px;
    }
    .eight h3 {
        font-size: 1.5em;
    }
    .formdiv form {
        padding-top: 25%;
    }
    .formdiv form input {
        font-size: 1em;
    }
    .eight img {
        /* top: 16%;
        transform: scale(.5);
        left: 5%; */
        display: none;
    }
    .eight h4{
        font-size: 0.5em;
    }
}
@media screen and (max-device-width:540px) and (min-device-width:540px){
    .eight .formdiv {
        width: 90%;
        height: 65%;
        margin-left: 10%;
    }
    .eight h1 {
        margin-top: 6%;
        font-size: 2em;
    }
    .eight h2 {
        font-size: .5em;
        letter-spacing: 1px;
    }
    .eight h3 {
        font-size: 1.5em;
    }
    .formdiv form {
        padding-top: 45%;
    }
    .formdiv form input {
        font-size: 1em;
    }
    .eight img {
        /* top: 16%;
        transform: scale(.5);
        left: 20%; */
        display: none;
    }
    .eight h4 {
        font-size: .8em;
    }
}

/* 横屏 */
@media screen and (min-device-width:600px) and (max-device-width:1024px) and (min-device-height:650px){
    /* @media screen and (orientation: portrait) { */
    .formdiv form {
        padding-top: 0%;
    }
    .eight .formdiv {
        height: 59%;
    }
    .formdiv form input {
        margin: 5% 0;
    }
    .eight h3 {
        margin-top: 0;
    }
    .eight img{
        bottom: 25%;
    }
}

/* iphone x */
@media screen and (max-device-width:500px) and (min-device-height:740px){
    .formdiv form {
        padding-top: 67%;
    }
    .eight img{
        display: block;
        top: 15%;
        left: 7%;
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
    }
}

/* 手机横屏 */
@media screen and (min-device-width:560px) and (max-device-width:900px) and (max-device-height:500px){
    .eight h1 {
        margin-top: 0%;
        font-size: 2em;
    }
    .eight h2 {
        font-size: .5em;
        letter-spacing: 1px;
    }
    .eight h3 {
        font-size: 1em;
        margin-top: 1%;
    }
    .eight h4 {
        font-size: .5em;
    }
    .formdiv form input {
        font-size: 1em;
        margin: 2% 0;
    }
    .eight .formdiv {
        height: 60%;
    }
    .eight img {
        display: block;
        top: 20%;
        left: 3%;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}
@media screen and (min-device-width:768px) and (max-device-width:770px) and  (min-device-height:900px){
    .eight h2 {
        font-size: 1em;
    }
    .eight .formdiv {
        width: 90%;
        height: 70%;
        margin-left: 10%;
    }
    .formdiv form {
        padding-top: 20%;
    }
    .eight img {
        top: 25%;
        left: 30%;
    }
    .eight h4 {
        font-size: 1.3em;
    }
    .eight img {
        /* top: 16%;
        transform: scale(.5);
        left: 5%; */
        display: none;
    }
}
@media screen and (min-device-width:1024px) and (min-device-height:1000px) {
    .eight h2 {
        font-size: 1em;
    }
    .eight .formdiv {
        width: 90%;
        height: 70%;
        margin-left: 10%;
    }
    .formdiv form {
        padding-top: 15%;
    }
    .eight img {
        top: 25%;
        left: 35%;
    }
    .eight h4 {
        font-size: 1.5em;
    }
}